/**
 * 
 * 结构:
 * <div id=''>
 * 		<h2>ekkk</h2>
 * 		<div class="slides-nav">
 * 			<span class="slides-cur">1</span> of <span class="slides-size">3</span>
 * 			<span class="slides-prev move-left"></span>
 * 			<span class="slides-next move-right"></span>
 * 		</div> 
 * 		<div class="slides-control slideContent">
 * 		    <ul></ul>
 * 			<ul></ul>
 * 			<ul></ul>
 *      </div>
 *      <div class="slides-image-nav">
 *      	<a class="image-paging-now"></a>
 *      </div>
 * </div>
 * @param
 * options = {
 * 		onslide: function(index, $ul, $this){},
 * 		moveLeftClass: 'move-left',
 * 		moveRightClass: 'move-right',
 * 		slideWidth: 605,
 * 		selectedClass: 'image-paging-now',
 * 		auto: false,	   //auto slide
 * 		interval: 10,     //auto slide interval
 * 		stop: true,      //stop when hover
 * 		duration: 500    //slide duration 
 * }
 * @author  tanggf
 */
(function($){
	$.fn.slides = function(options){
		//default setting
		options = __slides_options(options);
		return this.each(function(){			
			__get_slides_(this, options);
		});		
	}; 	
	
	$.extend({
		slides: function($ele, options){
			var ele = $ele[0];
			options = __slides_options(options);
			return __get_slides_(ele, options);
		}
	});
	
	function __slides_options(options){
		return $.extend({
			moveLeftClass: 'move-left',
			moveRightClass: 'move-right',
			selectedClass: 'image-paging-now',
			auto: false,
			interval: 5,
			stop: true,
			speed: 500,
			duration: 500
		}, options);
	}
	
	function __get_slides_(ele, options){
		var slide = $(ele).data("slides");
		if( ! slide){
			slide = new _Slides_(ele, options);
			$(ele).data("slides", slide);
		}
		return slide;
	}
	
	function _Slides_(ele, options){
		this.$this = $(ele);
		this.options = options;
		this._start_();
	}
	_Slides_.prototype = {	
			_start_: function(){
				this._init_();
				
				if(this.size >= 2){
					this._set_style();
					this._set_nav_();
					
					if(this.options.auto === true){
						this._set_interval();
						
						var self = this;
						if(this.options.stop === true){
							this.$uls.hover(function(){
								if(self.interval){
									clearInterval(self.interval);
								}
							}, function(){
								self._set_interval();
							});
						}
					}					
				}
			},
			
			_init_: function(){
				this.current = 1;
				this.$control = this.$this.children("div.slides-control");
				this.$uls = this.$control.children("ul");				
					
				this.$nav = this.$this.children("div.slides-nav");					
				this.hasNav = this.$nav.length > 0;
				
				this.$imgNav = this.$this.children("div.slides-image-nav");
				this.hasImgNav = this.$imgNav.length > 0;
				
				this.size = this.$uls.length;		
				this.width = this.$uls.outerWidth() || this.options.slideWidth;
				this.heigth = this.$uls.outerHeight();
			},
			
			_set_style: function(){											
				this.$control.css({					
					//width: this.width * this.size,
					heigth: this.heigth
				});				
			},
			
			_set_nav_: function(){
				if(this.hasNav){
					this.$cur = this.$nav.children("span.slides-cur");
					this.$total = this.$nav.children("span.slides-size");
					this.$prev = this.$nav.children("span.slides-prev");
					this.$next = this.$nav.children("span.slides-next");
					this.$cur.text(this.current);
					this.$total.text(this.size);
					
					var self = this;
					this.$prev.click(function(){
						if(self.current > 1){
							self.slide(self.current - 1);
						}
					});
					this.$next.click(function(){								
						if(self.current < self.size){							
							self.slide(self.current + 1);
						}
					});
				}
				
				if(this.hasImgNav){
					var as = ['<a href="javascript:;" class="', this.options.selectedClass, '" index="1"></a>'];
					for ( var i = 1; i < this.size; i++) {
						as.push("<a href='javascript:;' index='" + (i + 1) + "'></a>");
					}
					this.$imgNav.html(as.join(""));
					var self = this;
					this.$imgAs = this.$imgNav.children("a");
					this.$imgAs.click(function(){
						var index = $(this).attr("index");
						self.slide(index);
						if(self.interval){
							clearInterval(self.interval);
							self._set_interval();
						}						
					});
				}
			},
			
			_set_interval: function(){			
				var self = this;
				self.interval = setInterval(function(){
					self.next();
				}, self.options.interval * 1000);
			},
			
			next: function(){
				var index = this.current + 1;
				if(index > this.size){
					index = 1;
				}				
				this.slide(index);
			},
			
			slide: function(index){
				index = parseInt(index) || 0;				
				if(index > 0 && index <= this.size && index != this.current){
					this.current = index;
					var gap = (index - 1) * this.width;		
					var duration = this.options.duration || this.options.speed;
					this.$control.animate({
						left: -gap
					}, duration);	
					
					//on slide callback
					if(this.options.onslide){
						this.options.onslide(index, this.$uls.eq(index - 1), this.$this);		
					}								
					
					if(this.hasNav){
						this.$cur.text(index);
						if(index == 1){
							this.$prev.removeClass(this.options.moveLeftClass);
						}else{
							this.$prev.addClass(this.options.moveLeftClass);
						}
						if(index == this.size){
							this.$next.removeClass(this.options.moveRightClass);
						}else{
							this.$next.addClass(this.options.moveRightClass);
						}
					}
					
					if(this.hasImgNav){
						this.$imgAs.removeClass(this.options.selectedClass).eq(index - 1).addClass(this.options.selectedClass);
					}
				}
			}
	};
})(jQuery);